<template>
    <div class="login">
        <div class='aside'>
            <span class="title">物流管理系统</span>
        </div>
        <div class='main'>
            <div class="admin">管理员登录</div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="account">
                    <el-input v-model="ruleForm.account" placeholder="账号" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" placeholder="密码" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="vercode">
                    <el-input v-model="ruleForm.vercode" placeholder="验证码" autocomplete="off" style="width:50%"></el-input>
                    <div @click="getCode" v-html="code" style="vertical-align:middle;display:inline-block;"></div>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" style="width:100%">登录</el-button>
            </el-form>
        </div>
    </div>
</template>
   
<script>
import myaxios from '../components/axios';
export default {
    data() {
        return {
            ruleForm: {
                account: "",
                pass: "",
                vercode: ""
            },
            code: "",
            codeText: "",
            rules: {
                account: [
                    { required: true, message: "账号不能为空", trigger: "blur" }
                ],
                pass: [
                    { required: true, message: "密码不能为空", trigger: "blur" }
                ],
                vercode: [
                    { required: true, message: "验证码不能为空", trigger: "blur" }
                ],
            }
        };
    },
    methods: {
        async getCode() {
            await myaxios.get("/code")
                .then(res => {
                    this.code = res.data.data;
                    this.codeText = res.data.text;
                })
        },
        async submitForm() {
            await myaxios.post("/subform",
                { account: this.ruleForm.account, pass: this.ruleForm.pass })
                .then(res => {
                    console.log(this.ruleForm.account, this.ruleForm.pass)
                    if (this.codeText == this.ruleForm.vercode) {
                        this.$message({
                            message: '登录成功！',
                            type: 'success'
                        })
                        localStorage.setItem("token", res.data.token);
                        localStorage.setItem("account", res.data.user.item.account);
                        this.$router.push("/home");
                    } else {
                        this.$message.error('登录失败！');
                    }
                }).catch(error => {
                    this.$message.error('登录失败！');
                    console.log(error);
                })
        },
    },
    mounted() {
        this.getCode();
    }
}
</script>
<style>
.login {
    display: flex;
    justify-content: space-between;
    height: 550px;
}

.title {
    font-size: 30px;
    color: white;
    position: absolute;
    top: 120px;
    left: 45px
}

.aside {
    background-image: url('../../public/bg.jpg');
    background-repeat: no-repeat;
    background-size: 150%;
    position: relative;
    text-align: center;
    line-height: 200px;
    flex: 2;

}

.main {
    margin-top: 70px;
    flex: 1;
    padding: 20px;
}

.admin {
    font-weight: bolder;
    font-size: 18px;
    margin: 30px;
}

.el-form {
    width: 250px;
    margin-left: 30px;
}</style>
  